<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Other | Navigation</title>

    <style type="text/css">
      body {
        font: 10pt sans;
      }
      #mynetwork {
        width: 600px;
        height: 600px;
        border: 1px solid lightgray;
      }
      table.legend_table {
        border-collapse: collapse;
      }
      table.legend_table td,
      table.legend_table th {
        border: 1px solid #d3d3d3;
        padding: 10px;
      }

      table.legend_table td {
        text-align: center;
        width: 110px;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script
      type="text/javascript"
      src="https://unpkg.com/alea@1.0.0/alea.js"
    ></script>
    <script type="text/javascript" src="../exampleUtil.js"></script>

    <script type="text/javascript">
      var nodes = null;
      var edges = null;
      var network = null;

      function destroy() {
        if (network !== null) {
          network.destroy();
          network = null;
        }
      }

      function draw() {
        destroy();

        // create an array with nodes
        var nodes = [
          { id: 1, label: "Node 1" },
          { id: 2, label: "Node 2" },
          { id: 3, label: "Node 3" },
          { id: 4, label: "Node 4" },
          { id: 5, label: "Node 5" },
        ];

        // create an array with edges
        var edges = new vis.DataSet([
          { from: 1, to: 3 },
          { from: 1, to: 2 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
        ]);

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {
          interaction: {
            navigationButtons: true,
            keyboard: true,
          },
        };
        network = new vis.Network(container, data, options);

        // add event listeners
        network.on("select", function (params) {
          document.getElementById("selection").innerText =
            "Selection: " + params.nodes;
        });
      }
    </script>
  </head>

  <body onload="draw();">
    <h2>Navigation controls and keyboard navigation</h2>
    <div style="width: 800px; font-size: 14px; text-align: justify">
      This example is the same as example 2, except for the navigation controls
      that have been activated. The navigation controls are described below.
      <br /><br />
      <table class="legend_table">
        <tr>
          <th>Icons:</th>
          <td><img src="../../../dist/img/network/upArrow.png" /></td>
          <td><img src="../../../dist/img/network/downArrow.png" /></td>
          <td><img src="../../../dist/img/network/leftArrow.png" /></td>
          <td><img src="../../../dist/img/network/rightArrow.png" /></td>
          <td><img src="../../../dist/img/network/plus.png" /></td>
          <td><img src="../../../dist/img/network/minus.png" /></td>
          <td><img src="../../../dist/img/network/zoomExtends.png" /></td>
        </tr>
        <tr>
          <th>Keyboard shortcuts:</th>
          <td><div>Up arrow</div></td>
          <td><div>Down arrow</div></td>
          <td><div>Left arrow</div></td>
          <td><div>Right arrow</div></td>
          <td>
            <div>=<br />[<br />Page up</div>
          </td>
          <td>
            <div>-<br />]<br />Page down</div>
          </td>
          <td><div>None</div></td>
        </tr>
        <tr>
          <th>Description:</th>
          <td>Move up</td>
          <td>Move down</td>
          <td>Move left</td>
          <td>Move right</td>
          <td>Zoom in</td>
          <td>Zoom out</td>
          <td>Zoom extent</td>
        </tr>
      </table>
      <br />
      Apart from clicking the icons, you can also navigate using the keyboard.
      The buttons are in table above. Zoom Extends changes the zoom and position
      of the camera to encompass all visible nodes.
      <u>
        Styles have to be loaded to correctly display the icons. Standalone
        build includes necessary styles and automatically injects them into the
        page but for peer and legacy builds it's necessry to manually load
        <b>vis-network.css</b>.
      </u>
      The user is free to alter or overload the CSS classes but without them the
      navigation icons are not visible.
    </div>

    <div id="mynetwork"></div>

    <p id="selection"></p>
  </body>
</html>
